<template>
  <div :class="['v_input_container', cls, ]" :id="vid">
    <div class="input_box">

      <input 
      :type="type" 
      name="" 
      :value="value" 
      :placeholder="placeHolder" 
      @input="vueInputInput($event.target.value)"
      @blur="vueInputBlur()"
      @change="inputChange()"

      />
    </div>
    <div class="v_err_info_box">
      <span class="input_err_tips" v-show="!validateRes">{{errInfo}}</span>
    </div>

  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      validateRes: true,
      errInfo: ''


    }
  },
  methods: {
    vueInputBlur: function(){
      
    },
    vueInputInput: function(val){

      this.$emit('input', val);
      
    },
    getValue: function(){
      return this.value;
    },
    inputChange: function(){
      var val = this.value;
      console.log('input val === %s', val);
      if(this.required){
        if(val.toString().length === 0 ){
          alert(' 输入不合法');
          this.validateRes = false;
          this.errInfo = '输入不能为空';

        }
      }
    }
  },
  props: {
    value: {
    },
    type: {
      type: String,
      default: 'text'//支持text，password，email，url，number，
    },
    autoWidth: {
      type: Boolean,
      default: true
    },
    width: {
      type: String,
      default: '100px'
    },
    placeHolder: {
      type: String,
      default: '请输入'
    },
    required: {
      type: Boolean,
      default: false
    },
    maxWidth: {
      type: Number,
      default: 25,
    },
    vid: {
      type: String,
      default: ''
    },
    cls: {
      type: String,
      default: ''
    }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.v_input_container{
  display: inline-block;
  position: relative;
  height: 24px;
  font-size: 12px;
  color: #666;
  .input_box{
    display: inline-block;
    border: 1px solid #d8d8d8;
    padding: 3px 5px;


    input{
      outline: none;
      border: none;

    }
  }

  .v_err_info_box{
    position: absolute;
    top: 24px;
    left: 6px;
    color: red;
    .input_err_tips{
      font-size: 12px;

    }
  }
}
</style>
